<template>
	<view>
		<view v-if="activityList.length">
			<view class="activity-item" v-for="(item,index) in activityList" :key="index">
				<image :src="item.imgUrl" class="item-pic"></image>
				<view class="desc">
					<view class="title">
						{{item.name}}
					</view>
					<view class="start-time">
						<text class="time">开抢时间：{{item.startDate.slice(0,16)}}</text>
						<text class="rushed" v-if="item.isQg=='1'">已抢</text>
						<text class="rush" @click="toRush(item)"
							v-if="item.isQg=='0'&&Date.now() >= Date.parse(item.startDate)">抢</text>
						<text class="rush" v-if="item.isQg=='0'&&Date.now() < Date.parse(item.startDate) ">未开始</text>
					</view>
				</view>
			</view>
		</view>

		<view class="" v-if="!activityList.length">
			暂无红包活动~
		</view>


		<!-- 红包遮罩层 -->
		<view class="hongbao-mask" v-if="showMask" ref="mask">
			<image src="/static/icons/reward_obtain.png" class="hongbao-pic" v-if="isPriceFlage"></image>
			<image src="/static/icons/reward_no@3x.png" class="hongbao-pic" v-if="isNoneFlag"></image>
			<text class="num" v-if="isPriceFlage">{{price}}<text class="yuan">元</text></text>
			<view class="close-mask" @click="closeMask">关闭</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				activityList: [],
				showMask: false,
				price: 0,
				isPriceFlage: false,
				isNoneFlag: false,
				offset: 1, // 页码
				count: 0 // 列表总数
			};
		},
		onLoad(option) {
			console.log(this.userInfo._id)
			this.getActivities(this.userInfo._id)
		},
		async onReachBottom() {
			if (this.activityList.length < this.count) {
				this.offset++
				const {
					data: res
				} = await uni.$http.post('/redPacket/getRedPacketList', {
					userId: this.userInfo._id,
					offset: this.offset,
					limit: 10
				})

			}
		},
		methods: {
			// 关闭红包遮罩
			closeMask() {
				this.showMask = false
				this.isNoneFlag = false
				this.isPriceFlage = false
			},
			// 抢红包
			async toRush(item) {
				if (item.num > 0) {
					this.showMask = true
					// console.log(this.userInfo)
					const {
						data: res
					} = await uni.$http.post('/redPacket/robRedPacket', {
						"userId": this.userInfo._id,
						"redPacketId": item._id
					})
					console.log(res)
					// 抢到了红包
					if (res.data.price) {
						// 显示给用户红包金额
						this.price = res.data.price
						this.isPriceFlage = true
						this.getActivities(this.userInfo._id)
					} else {
						// 显示已抢光
						// uni.$showMsg(res.data.msg)
						this.isNoneFlag = true
						this.getActivities(this.userInfo._id)
					}
				}
			},
			// 获取活动列表
			async getActivities(id) {
				const {
					data: res
				} = await uni.$http.post('/redPacket/getRedPacketList', {
					userId: id,
					offset: 1,
					limit: 20
				})
				console.log(res.data)
				this.count = res.data.total
				this.activityList = res.data.list

			}
		},
		computed: {
			...mapState('m_user', ['userInfo'])
		}
	}
</script>

<style lang="scss">
	page {
		padding: 0 24rpx;
		box-sizing: border-box;
		padding-bottom: 50rpx;
	}

	.activity-item {
		height: 248rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #ececec;
	}

	.item-pic {
		width: 200rpx;
		height: 200rpx;
		margin-right: 23rpx;
	}

	.desc {
		flex: 1;
		height: 200rpx;
		padding: 13rpx 0;
		padding-bottom: 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.title {
			height: 100rpx;
			overflow: hidden;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
		}

		.start-time {
			flex: 1;
			font-size: 24rpx;
			font-weight: 400;
			color: #333333;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			.time {
				margin-bottom: 13rpx;
			}

			.rush {
				width: 118rpx;
				height: 52rpx;
				line-height: 52rpx;
				background: linear-gradient(-67deg, #E73E17 0%, #F8733F 100%);
				border-radius: 26rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #FFFEFE;
				text-align: center;
			}

			.rushed {
				width: 118rpx;
				height: 52rpx;
				line-height: 52rpx;
				background: #E2E2E2;
				border-radius: 26rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #FFFEFE;
				text-align: center;
			}
		}
	}

	// 红包的遮罩
	.hongbao-mask {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, .5);

		.num {
			font-size: 116rpx;
			font-weight: bold;
			color: #F40807;
			position: fixed;
			top: 30%;
			left: 50%;
			transform: translateX(-50%);

			.yuan {
				font-size: 50rpx;
			}
		}

		.hongbao-pic {
			width: 628rpx;
			height: 663rpx;
			margin: auto;
			position: fixed;
			top: 20%;
			left: 50%;
			transform: translateX(-50%);
		}

		.close-mask {
			width: 260rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: linear-gradient(-67deg, #E73E17 0%, #F8733F 100%);
			border-radius: 24rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #FFFEFE;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			top: 80%;
		}
	}
</style>
